<template>
  <v-navigation-drawer v-model="drawer" :class="{
    '!z-[1]': mobile == false
  }">
    <div class="h-full scroll_content_y relative" id="appNavigationDrawer">
      <!-- Logo -->
      <logo></logo>
      <!-- 菜单栏 -->
      <menuList></menuList>
    </div>
  </v-navigation-drawer>

</template>

<script lang="ts" setup>
import logo from "../components/logo.vue";
import menuList from "../components/menuList/index.vue";

import { ref, watch, onMounted, onUnmounted } from "vue";
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const drawer = ref(true);

watch(mobile, () => {
  if (mobile.value) {
    drawer.value = false;
  } else {
    drawer.value = true;
  }
}, {
  immediate: true
})

// 挂载eventBus事件
onMounted(() => {
  proxy.$bus.off("appLeftMenu");
  proxy.$bus.on("appLeftMenu", ({ method }: any) => {
    if (method == "open") {
      open();
    } else if (method == "close") {
      close();
    } else if (method == "toggle") {
      toggle();
    }
  })
})
onUnmounted(() => {
  proxy.$bus.off("appLeftMenu");
})

function open() {
  drawer.value = true;
}

function close() {
  drawer.value = false;
}

function toggle() {
  drawer.value = !drawer.value;
}

defineExpose({
  open,
  close,
  toggle
})
</script>

<style scoped></style>